<template>
  <div class="common-collect">
    <div
      class="common-collect-item"
      v-for="(item, index) in dataList"
      :key="index"
      @click="detail(item)"
    >
      <el-tooltip effect="dark" :content="item.title" placement="top">
        <el-image class="img-data" :src="item.cover" :lazy="index > 7">
          <div slot="placeholder">
            <span style="font-size: 14px">正在加载...</span>
          </div>
        </el-image>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommonCollectView",
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    detail(item) {
      this.$router.push(`/course${item.type}/detail/${item.typeId}`);
    },
  },
};
</script>

<style lang="less" scoped>
.common-collect {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .common-collect-item {
    width: 120px;
    height: 180px;
    margin: 8px 13.4px;
    border-radius: 10px;
    cursor: pointer;
    .img-data {
      width: 100%;
      height: 100%;
      background-color: rgba(240, 240, 240, 0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #999;
      font-size: 15px;
      // 阴影
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      &:hover {
        box-shadow: rgba(53, 176, 228, 0.15) 0px 15px 25px,
          rgba(53, 176, 228, 0.5) 0px 5px 10px;
        // 平滑过渡
        transition: all 0.2s ease-in-out;
        // 缩放
        transform: scale(1.02);
      }
      // 鼠标移出时，恢复原状
      &:not(:hover) {
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
        // 平滑过渡
        transition: all 0.2s ease-in-out;
        // 缩放
        transform: scale(1);
      }
      &:active {
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
        // 平滑过渡
        transition: all 0.2s ease-in-out;
        // 缩放
        transform: scale(1);
      }
    }
  }
}
</style>